<template>
    <div class="">
        <el-drawer v-model="isDrawer" size="600px" :before-close="GoTo">
            <template #header>
                新增直播
            </template>
            <div class="header">
                <h3>{{ classObj.courseName }}</h3>
                <p><span>班期名称:</span>{{ returnObj.value.className }}</p>
                <el-button type="primary" @click="openVisible">新增直播</el-button>
            </div>
            <div class="live-list">
                <ul>
                    <li v-for="item in returnObj.value.liveList.liveList" :key="item._id" :data-id="item._id"
                        class="live-item">
                        <div class="tag">{{ tagTxt(item) }}</div>
                        <div class="live-content">
                            <h5>{{ item.liveName }}</h5>
                            <div>
                                <span>讲师:{{ item.teacher }}</span>
                                <span>直播时间:{{ formatTime(item.liveTime) }}</span>
                                <span>时长:{{ item.liveTime - new Date > 0 ? "----" : "02:04:30" }}</span>
                            </div>
                            <div class="delete" @click="deleteLiveFn(item._id)">
                                <el-icon>
                                    <Close />
                                </el-icon>
                            </div>
                        </div>

                    </li>
                </ul>
            </div>

        </el-drawer>
    </div>
    <el-dialog v-model="dialogTableVisible" title="新建直播" :before-close="close">
        <el-form :model="addData" ref="formRef" :rules="rule">
            <el-form-item label="直播标题" prop="liveName">
                <el-input v-model="addData.liveName" placeholder="请输入直播标题"></el-input>
            </el-form-item>
            <el-form-item label="直播开始时间" prop="liveTime">
                <el-date-picker v-model="addData.liveTime" placeholder="请选择直播开始时间" type="datetime"
                    :default-time="defaultTime" :disabled-date="disabledFn"></el-date-picker>
            </el-form-item>
            <el-form-item label="直播时长" prop="liveDuration">
                <el-input v-model="addData.liveDuration" placeholder="请输入直播时长(分钟)"></el-input>
            </el-form-item>
            <el-form-item label="讲师" prop="teacher">
                <el-select v-model="addData.teacher" placeholder="请选择讲师">
                    <el-option :label="'大炮'" :value="'大炮'" />
                    <el-option :label="'李旋飞'" :value="'李旋飞'" />
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="close">取消</el-button>
            <el-button type="primary" @click="commit">保存</el-button>
        </template>
    </el-dialog>
</template>

<script setup>
// 新增直播抽屉组件
import { ref, defineExpose, defineEmits, computed } from 'vue'
import { formatTime } from '@/utils/formmatTime'
import { addLive, deleteLive } from '@/apis/live'
import { quiFn } from '@/hooks/quiFn'; // 弹窗插件
import { ElMessage } from 'element-plus';

const isDrawer = ref(false)
const classObj = ref({})
// 动态修改数据
const returnObj = computed(() => {
    return classObj
})
const addData = ref({
    // 直播标题
    liveName: '',
    // 直播时长
    liveDuration: '',
    // 直播讲师
    teacher: '',
    // 直播时间
    liveTime: '',
    // 班级
    className: '',
    // 课程名称
    courseName: '',
})


// 打开抽屉方法
const open = (row) => {
    classObj.value = row
    isDrawer.value = true
}

// 关闭抽屉
const GoTo = ()=>{
    document.querySelector('.el-drawer__body').scrollTo(0,0)
    isDrawer.value = false
}

const tagTxt = (item) => {
    return item.liveTime - new Date() > 0 ? '直播' : '回放'
}

// 控制对话框
const defaultTime = new Date(2000, 1, 1, 20, 30, 0)
const dialogTableVisible = ref(false)
// 表单组件对象
const formRef = ref({})
const emit = defineEmits(['change'])
// 表单校验规则
const rule = ref({
    liveName: [{ required: true, message: '直播标题是必填项', trigger: 'bulr' }],
    liveDuration: [{ required: true, message: '直播开始时间是必填项', trigger: 'bulr' }],
    teacher: [{ required: true, message: '直播时长是必填项', trigger: 'bulr' }],
    liveTime: [{ required: true, message: '讲师必填项', trigger: 'bulr' }],
})

// 打开对话框ing
const openVisible = () => {
    dialogTableVisible.value = true
}

// 关闭对话框
const close = () => {
    quiFn({}, () => {
        dialogTableVisible.value = false
        formRef.value.resetFields()
        formRef.value.clearValidate()
    })
}

// 今天之前的日期不能被选中
const disabledFn = (value) => {
    const date = new Date()
    return date >= value
}



// 新增直播
const commit = () => {
    // 将课程名称，班期，父级直播id封装起来发送给后端
    addData.value.className = classObj.value.className
    addData.value.courseName = classObj.value.courseName
    addData.value._id = classObj.value.liveList._id
    formRef.value.validate(async (value) => {
        if (value) {
            const { data } = await addLive(addData.value)
            if (!data.code) {
                ElMessage.success('新增成功')
                // 触发父组件中的自定义事件，让父组件重新获取数据
                emit('change')
                // 关闭对话框
                dialogTableVisible.value = false;
                isDrawer.value = false;
                for (const key in addData.value) {
                    addData.value[key] = ''
                }
            }

        } else {
            ElMessage.error('参数有误')
        }
    })

}

// 删除直播
const deleteLiveFn = async (id) => {
    // id 当前直播的id
    // _id 当前直播组id
    const { data } = await deleteLive({ _id: classObj.value.liveList._id, id })
    if (!data.code) {
        ElMessage.success("删除成功")
        emit('change')
        // 关闭对话框
        dialogTableVisible.value = false;
        isDrawer.value = false;
    } else {
        ElMessage.success("删除失败")
    }

}



defineExpose({
    open
})
</script>


<style lang="scss" scoped>
:deep(.el-derwer_body) {
    padding-top: 0;
}

.header {
    position: absolute;
    box-sizing: border-box;
    width: 92%;
    top: 70px;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
    background-color: #fff;
    z-index: 100;

    h3 {
        font-size: 15px;
        color: #000;
    }

    p {
        font-size: 13px;
        color: #666;
        margin-top: 20px;
        margin-bottom: 20px;

        span {
            color: #ccc;
        }
    }
}

.live-list {
    margin-top: 130px;

    .live-item {
        position: relative;
        padding: 30px 60px;

        .live-content {
            h5 {
                font-size: 14px;
            }

            div {
                margin-top: 15px;
                font-size: 12px;
                color: #bfbfbf;

                span {
                    margin-right: 25px;
                }
            }


            .delete {
                cursor: pointer;
                font-size: 20px;
                display: block;
                position: absolute;
                left: 50%;
                top: 50px;
                margin-left: 200px;
                color: #e37777;
            }
        }
    }
}

:deep(.el-form-item_label) {
    width: 130px;
}

:deep(.el-input) {
    width: 80%;
}

.tag {
    position: absolute;
    left: 12px;
    top: 50px;
    width: 40px;
    height: 20px;
    border: 1px solid #eee;
    text-align: center;
    line-height: 20px;
    font-size: 12px;
    background-color: #fafafa;
    border-radius: 5px;
}
</style>